<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			margin: 0;
		}

		.nav-bar1 a {
			text-decoration: none;
			color: #fff;
			float: left;
			margin-right: 20px;
			padding: 0 30px;
		}

		.nav-bar1 a.active, .nav-bar1 a:hover {
			background-color: #fff;
			color: red;
		}

		.nav-bar1 {
			background-color: red;
			height: 50px;
			line-height: 50px;
			padding-left: 30px;
		}

		.nav-bar2 li {
			/*float: left;*/
			display: inline-block;
		}
	</style>
</head>
<body>
	
	<div class="nav-bar1">
		<a href="javascript:;" class="active">菜单1</a>
		<a href="javascript:;">菜单2</a>
		<a href="javascript:;">菜单3</a>
		<a href="javascript:;">菜单4</a>
		<a href="javascript:;">菜单5</a>
	</div>

	<hr>

	<ul class="nav-bar2">
		<li>新菜单1</li>
		<li>新菜单2</li>
		<li>新菜单3</li>
		<li>新菜单4</li>
		<li>新菜单5</li>
	</ul>

</body>
</html>